<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/mobiscroll.css">
    <link rel="stylesheet" href="../../css/mobiscroll_date.css">
    <link rel="stylesheet" href="../../css/ios_select.css">
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/aui_font.css">
    <link rel="stylesheet" href="../../css/news.css">
    <link rel="stylesheet" href="../../css/area.css" />
    <style>
        * {
            touch-action: pan-y;
        }

        html,
        body {
            background-color: #eee;
        }

        .dy-wrap .list {
            display: flex;
            align-items: center;
            background: #fff;
            border-bottom: 1px solid #eee;
            padding: 15px;
            font-size: 14px;
        }

        .dy-wrap .list .title {
            font-weight: bold;
            margin-right: 10px;
            /* color: #222; */
            color: #333333;
            word-break: keep-all;
        }

        .dy-wrap .list .content {
            width: 100%;
        }

        .dy-wrap .list .content input {
            width: 100%;
        }

        .new-submit {
            font-size: 14px;
        }

        /* 配图 */
        .dy-wrap .list.tu {
            align-items: flex-start;
        }

        .dy-wrap .list.tu .i-list {
            position: relative;
            margin-top: 15px;
            margin-right: 15px;
        }

        .dy-wrap .list.tu .img {
            height: 80px;
            width: 80px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .dy-wrap .list.tu .img img {
            width: 80px;
            height: 80px;
        }

        .dy-wrap .list.tu .aui-icon-close {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #fff;
            border: 1px dashed #aaa;
            border-radius: 50%;
            padding: 2px;
        }

        .tip {
            font-size: 10px;
            color: #F46CEF;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="view" v-cloak>
        <ul class="wrap dy-wrap">
            <li class="list new-margin-t-10 theme" onclick="selectAction('theme')">
                <div class="title">节目主题</div>
                <div class="content">
                    <input type="text" placeholder="请选择" readonly>
                </div>
            </li>
            <li class="list city"
                onclick="_url({event: 'fabuCity', type:2, cityLen: 1,  url: 'frame0/city', title:'选择城市', moreTitle: '确定'})">
                <div class="title">约会城市</div>
                <div class="content">
                    <input type="text" placeholder="请选择" readonly>
                </div>
            </li>
            <!-- <li class="list dy-content new-margin-t-10">
                <div class="title">约会内容</div>
                <div class="content">
                    <input type="text" placeholder="请填写">
                </div>
            </li> -->
            <!-- <li class="list time">
                <div class="title">约会时间</div>
                <div class="content">
                    <input type="text" placeholder="请选择" readonly id="activeTime">
                </div>
            </li> -->
            <li class="list time">
                <div class="title flex">时间<span class="new-invisible">时间</span></div>
                <div class="content">
                    <input type="text" placeholder="选择日期" readonly id="activeTime">
                </div>
            </li>
            <li class="list dy_time">
                <div class="title new-invisible">时间时间</div>
                <div class="content">
                    <input type="text" placeholder="选择时间" readonly onclick="myScroll('dy_time', 0, '时间')">
                </div>
            </li>
            <li class="list dy_conditions" onclick="myScroll('dy_conditions', 0, '期望对象')">
                <div class="title">期望对象</div>
                <div class="content">
                    <input type="text" placeholder="请选择" readonly>
                </div>
            </li>
            <!-- <li class="list pay" onclick="selectAction('pay')">
                <div class="title">约会买单</div>
                <div class="content">
                    <input type="text" placeholder="请选择" readonly>
                </div>
            </li>
            <li class="list budget">
                <div class="title">约会预算</div>
                <div class="content">
                    <input type="text" placeholder="请填写" onkeyup="num(this)">
                </div>
            </li> -->
            <li class="list tu flex-col new-margin-t-10">
                <div class="title">约会配图</div>
                <div class="content">
                    <ul class="img-wrap flex-w">
                        <!-- <li class="i-list">
                            <div class="img img-h">
                                <img src="../../image/test/01.jpg" alt="">
                            </div>
                            <i class="aui-iconfont aui-icon-close"></i>
                        </li> -->
                        <li id="pic" class="i-list" onclick="selectFile();">
                            <div class="img img-h">
                                <img src="../../image/icon/btn_addphoto.png" alt="">
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>

        <p class="tip" id="js-tip"></p>
        <button class="new-submit" onclick="submit()">确定发布</button>
        <!--选择地区弹层-->
        <section id="areaLayer" class="express-area-box" style="z-index: 150;">
            <header>
                <h3>选择城市</h3>
                <a id="backUp" class="back" href="javascript:void(0)" title="返回"></a>
                <a id="closeArea" class="close" href="javascript:void(0)" title="关闭"></a>
            </header>
            <article id="areaBox">
                <ul id="areaList" class="area-list"></ul>
            </article>
        </section>
        <!--遮罩层-->
        <div id="areaMask" class="mask" style="z-index:100;"></div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>

<script src="../../script/mobiscroll_time.js" charset="UTF-8"></script>
<script src="../../script/mobiscroll.js"></script>
<script src="../../script/jquery_area.js"></script>
<script src="../../script/select_json.js"></script>
<script src="../../script/fabu.js"></script>
<script>
    var themeObj = {
        arr: [],
        obj: [],
        cid: 0,
    };
    var imgArr = []; // 选中的图片
    apiready = function () {
        getTheme();
        themeObj.cid = api.pageParam['cid'];
        $('.theme input').val(api.pageParam['name']);

        _listener('fabuCity', function (ret) {
            if (ret && ret.value.city) {
                $('.city input').val(ret.value.city)
            }
        })

        getConditions();

        // 获取广播规则
        // getPageContent(8, function (data) {
        //     $('#js-tip').html(data.body);
        // })
    }

    $(function () {
        var opt = {};
        opt.datetime = {
            preset: 'date'
        };
        var currYear = (new Date()).getFullYear();
        opt.default = {
            theme: 'android-ics light', //皮肤样式
            display: 'modal', //显示方式 
            mode: 'scroller', //日期选择模式
            dateFormat: 'yyyy-mm-dd',
            lang: 'zh',
            showNow: true,
            nowText: "今天",
            startYear: currYear, //开始年份
            endYear: currYear + 1, //结束年份
        };
        $("#activeTime").mobiscroll($.extend(opt['datetime'], opt['default'])); //显示日期
    })

    // 获取主题列表
    function getTheme() {
        _ajax('home/dymanic/category', function (ret, err) {
            console.log(JSON.stringify(ret))
            console.log(JSON.stringify(err))
            if (ret && ret.code == 200 && ret.result && ret.result.length > 0) {
                themeObj.obj = ret.result;
                for (var i = 0, len = ret.result.length; i < len; i++) {
                    themeObj.arr.push(ret.result[i].name);
                }
            }
        })
    }


    // 弹框选择
    function selectAction(type) {
        var buttons = type == 'theme' ? themeObj.arr : ['应约者买单', 'AA制', '发起者买单'];
        _action('', buttons, function (index) {
            if (index != (buttons.length + 1)) {
                $('.' + type + ' input').val(buttons[index - 1]);
                if (type == 'theme') {
                    themeObj.cid = themeObj.obj[index - 1].id;
                }
            }
        })
    }

    // 格式化输入
    function num(obj) {
        obj.value = obj.value.replace(/[^0-9.]*$/, ""); //清除"数字"和"."以外的字符
        obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字
        obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个, 清除多余的
        obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
    }

    // 选中城市
    function _areaSubmit(expressArea) {
        console.log(expressArea)
        $('.city input').val(expressArea)
    }

    // 选择图片
    function selectFile() {
        openPic(function (ret) {
            if (ret && ret.data) {
                imgArr.push(ret.data);
                imgCss(ret.data, function (w, h) {
                    var wh = w < h ? 'img-w' : 'img-h';
                    var html = `
                        <li class="i-list">
                            <div class="img ${wh}">
                                <img src="${ret.data}" alt="">
                            </div>
                            <i class="aui-iconfont aui-icon-close" onclick="delImg(this)"></i>
                        </li>`;
                    $('#pic').before(html);
                })
            }
        })
    }

    // 删除图片
    function delImg(obj) {
        var index = $(obj).parent().index();
        $('.img-wrap .i-list').eq(index).remove();
        imgArr.splice(index, 1);
    }

    // 确定
    function submit() {
        var theme = themeObj.cid;
        // var content = $.trim($('.dy-content input').val());
        var time = $('.time input').val();
        var city = $('.city input').val();
        var dy_time = $('.dy_time input').val();
        var dy_conditions = $('.dy_conditions input').val();
        // var pay = $('.pay input').val();
        // var budget = $('.budget input').val();
        var type = api.pageParam['type'];

        if (!theme) {
            _msg('请选择节目主题');
            return;
        }
        // if (!content) {
        //     _msg('请填写约会内容');
        //     return;
        // }
        if (!time) {
            _msg('请选择约会日期');
            return;
        }
        if (!dy_time) {
            _msg('请选择约会时间');
            return;
        }
        if (!city) {
            _msg('请选择约会城市');
            return;
        }
        if (!dy_conditions) {
            _msg('请选择期望对象');
            return;
        }
        // if (!pay) {
        //     _msg('请选择买单方式');
        //     return;
        // }
        // if (!budget) {
        //     _msg('请填写约会预算');
        //     return;
        // }
        judegFB(6)
    }


    // 发布
    function publishDY() {
        _loading();
        var theme = themeObj.cid;
        // var content = $.trim($('.dy-content input').val());
        var time = $('.time input').val();
        var dy_time = $('.dy_time input').val();
        var dy_conditions = $('.dy_conditions input').val();
        var city = $('.city input').val();
        // var pay = $('.pay input').val();
        // var budget = $('.budget input').val();
        var type = 1; // 约会广播
        if (imgArr.length != 0) {
            _upImgs({
                image: imgArr
            }, function (u) {
                _ajax('home/Dymanic/adddymanic', function (ret, err) {
                    console.log(JSON.stringify(ret))
                    console.log(JSON.stringify(err))
                    _loadingClose();
                    _msg(ret.msg);
                    if (ret && ret.code == 200) {
                        timerWin();
                    }
                }, {
                    datetime: time,
                    userid: $api.getStorage('userid'),
                    type: type,
                    citys: city,
                    category_id: theme,
                    desire_object: dy_conditions,
                    between: dy_time,
                    masterimg: u
                })
            })
        } else {
            _ajax('home/Dymanic/adddymanic', function (ret, err) {
                console.log(JSON.stringify(ret))
                console.log(JSON.stringify(err))
                _loadingClose();
                _msg(ret.msg);
                if (ret && ret.code == 200) {
                    timerWin();
                }
            }, {
                datetime: time,
                userid: $api.getStorage('userid'),
                type: type,
                citys: city,
                category_id: theme,
                desire_object: dy_conditions,
                between: dy_time,
            })
        }

    }

    // 滚动选择
    function myScroll(ziduan, type, title, arr) {
        var btnArr = [];
        if (type == 1) { // 单选 规则
            for (var i = arr[0]; i < arr[1]; i++) {
                var obj = {
                    "name": i
                };
                btnArr.push(obj);
            }
        } else if (type == 2) { // 多选
            _url({
                url: 'user/user_filter',
                title: '选择',
                arr: _paramObj[ziduan],
                ziduan: ziduan,
                winName: api.frameName
            })
            return;
        } else { // 单选 不规则
            btnArr = _paramObj[ziduan];
        }
        openUIActionSelector(btnArr, {
            col: 1,
            title: title
        }, function (ret, err) {
            if (ret.eventType == 'ok') {
                $('.' + ziduan + ' input').val(ret.level1);
            }
        })
    }
</script>

</html>